/* eslint-disable no-console */
/* eslint-disable promise/always-return */
/* eslint-disable jsx-a11y/anchor-is-valid */
/* eslint-disable react/jsx-props-no-spreading */
import * as React from 'react';
import { useNavigate, Link } from 'react-router-dom';
import Avatar from '@mui/material/Avatar';
import Button from '@mui/material/Button';
import CssBaseline from '@mui/material/CssBaseline';
import TextField from '@mui/material/TextField';
import FormControlLabel from '@mui/material/FormControlLabel';
import Checkbox from '@mui/material/Checkbox';
import Grid from '@mui/material/Grid';
import Box from '@mui/material/Box';
import { LockOutlined } from '@ant-design/icons';
import { postFetch } from '@/renderer/utils/request';
import Typography from '@mui/material/Typography';
import Container from '@mui/material/Container';
import CloseBtn from '../../components/CloseBtn';

function Copyright(props) {
  return (
    <Typography
      variant="body2"
      color="text.secondary"
      align="center"
      {...props}
    >
      {'Copyright © '}
      <a color="inherit" href="https://mui.com/" style={{ color: '#cccccc' }}>
        Your Website
      </a>{' '}
      {new Date().getFullYear()}.
    </Typography>
  );
}

export default function Login() {
  const navigate = useNavigate();

  const handleSubmit = (event) => {
    event.preventDefault();
    const data = new FormData(event.currentTarget);
    const params = {
      user_name: data.get('user_name'),
      password: data.get('password'),
    };

    postFetch({ url: '/webtool/login', params })
      .then((res) => {
        if (res.code === 0) {
          localStorage.setItem('TOKEN', res?.data);
          navigate('/home');
        }
      })
      .catch((e) => {
        console.log(e);
      });
  };

  return (
    <Container component="main" maxWidth="xs">
      <CloseBtn />
      <CssBaseline />
      <Box
        sx={{
          marginTop: 8,
          display: 'flex',
          flexDirection: 'column',
          alignItems: 'center',
        }}
      >
        <Avatar sx={{ width: 66, height: 66, marginBottom: 2 }}>
          <LockOutlined />
        </Avatar>
        <Typography component="h1" variant="h5" sx={{ marginBottom: 6 }}>
          登录
        </Typography>
        <Box component="form" onSubmit={handleSubmit} noValidate sx={{ mt: 1 }}>
          <TextField
            value="xutao"
            margin="normal"
            required
            fullWidth
            id="user_name"
            label="用户名"
            name="user_name"
            autoComplete="user_name"
            autoFocus
          />
          <TextField
            value="123456"
            margin="normal"
            required
            fullWidth
            name="password"
            label="密码"
            type="password"
            id="password"
            autoComplete="current-password"
          />
          <FormControlLabel
            control={<Checkbox value="remember" color="primary" />}
            label="记住密码"
          />
          <Button
            type="submit"
            fullWidth
            variant="contained"
            sx={{ mt: 3, mb: 2 }}
          >
            登 录
          </Button>
          <Grid container>
            <Grid item xs>
              <Link to="/login" style={{ color: '#cccccc' }}>
                忘记密码？
              </Link>
            </Grid>
            <Grid item>
              <Link to="/signup" style={{ color: '#cccccc' }}>
                还没有账号? 立即注册
              </Link>
            </Grid>
          </Grid>
        </Box>
      </Box>
      <Copyright
        sx={{
          position: 'fixed',
          bottom: 12,
          textAlign: 'center',
          width: '100%',
          left: 0,
        }}
      />
    </Container>
  );
}
